<template>
    <el-dialog v-model="dialogVisible" :title="title" width="680">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="90px">
            <el-row :gutter="15">
                <el-col :span="24">
                    <el-form-item label="上级菜单" prop="parentId">
                        <el-tree-select v-model="form.parentId" :data="menuTree"
                        :props="{ value: 'menuId', label: 'menuName', children: 'children' }" 
                        value-key="guid" clearable check-strictly style="width: 100%;" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="菜单类型" prop="menuType">
                        <el-radio-group v-model="form.menuType">
                            <el-radio label="M" border >目录</el-radio>
                            <el-radio label="C" border >菜单</el-radio>
                            <el-radio label="F" border >按钮</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="form.menuType != 'F'">
                    <el-form-item label="菜单图标" prop="icon">
                     <el-popover placement="bottom-start" :width="440" v-model:visible="showChooseIcon" trigger="click">
                        <template #reference>
                           <el-input v-model="form.icon" placeholder="点击选择图标"  readonly>
                              <template #prefix>
                                 <svg-icon v-if="form.icon" :icon-class="form.icon" class="el-input__icon"
                                    style="height: 32px;width: 16px;" />
                                 <el-icon v-else style="height: 32px;width: 16px;">
                                    <search />
                                 </el-icon>
                              </template>
                           </el-input>
                        </template>
                        <icon-select ref="iconSelectRef" @selected="selected" />
                     </el-popover>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="菜单名称" prop="menuName">
                        <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="显示排序" prop="orderNum">
                        <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.menuType != 'F'">
                    <el-form-item label="是否外链" prop="isFrame">
                        <el-radio-group v-model="form.isFrame">
                            <el-radio :label="0" border >是</el-radio>
                            <el-radio :label="1" border >否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.menuType != 'F'">
                    <el-form-item label="路由地址" prop="path">
                        <el-input v-model="form.path" placeholder="请输入路由地址" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.menuType != 'F' && form.menuType != 'M'">
                    <el-form-item label="组件路径" prop="component">
                        <el-input v-model="form.component" placeholder="请输入组件路径" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.menuType != 'M'">
                    <el-form-item label="权限标识" prop="perms">
                        <el-input v-model="form.perms" placeholder="请权限标识" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.menuType != 'F' && form.menuType != 'M'">
                    <el-form-item label="路由参数" prop="query">
                        <el-input v-model="form.query" placeholder="请输入路由参数" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.menuType != 'F' && form.menuType != 'M'">
                    <el-form-item label="是否缓存" prop="isCache">
                        <el-radio-group v-model="form.isCache">
                            <el-radio :label="0" border >缓存</el-radio>
                            <el-radio :label="1" border >不缓存</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.menuType != 'F'">
                    <el-form-item label="显示状态" prop="visible">
                        <el-radio-group v-model="form.visible">
                            <el-radio label="0" border >显示</el-radio>
                            <el-radio label="1" border >隐藏</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="菜单状态" prop="status">
                        <el-radio-group v-model="form.status">
                            <el-radio label="0" border >正常</el-radio>
                            <el-radio label="1" border >停用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="handleSubmit">确定</el-button>
                <el-button @click="cancel">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script>
import { reactive, toRefs } from "vue"
import { getMenuList, updateMenu } from "@/api/system/menu"
import iconSelect from "@/components/IconSelect/index.vue"
import { ElMessage } from "element-plus"

export default {
    name: "temp",
    components: { iconSelect },
    emits: ["rest"],
    setup(props, { emit }) {
        const { proxy } = getCurrentInstance()
        const data = reactive({
            title: "菜单信息",
            dialogVisible: false,
            form: {
                parentId: 0,
                menuType: 'M'
            },
            formRef: null,
            menuTree: [],
            showChooseIcon: false,
            rules: {
                menuName: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
                isFrame: [{ required: true, message: "请选择是否外链", trigger: "blur" }],
                isCache: [{ required: true, message: "请选择是否缓存", trigger: "blur" }],
                orderNum: [{ required: true, message: "请输入序号", trigger: "blur" }],
                path: [{ required: true, message: "请输入路由地址", trigger: "blur" }],
                component: [{ required: true, message: "请输入组件路径", trigger: "blur" }],
                visible: [{ required: true, message: "请选择显示状态", trigger: "blur" }],
                status: [{ required: true, message: "请选择菜单状态", trigger: "blur" }],
            }
        })

        const query = () => {
			getMenuList(data.form).then(res => {
				if(res.code == 200){
                    const menu = { menuId: 0, menuName: "主类目", children: [] };
                    menu.children = proxy.handleTree(res.data, "menuId");
					data.menuTree.push(menu) 
                    console.log(data.menuTree, 'menuTree')
				}
			})
		}

        const selected = (name) => {
            data.form.icon = name;
            data.showChooseIcon = false;
        }

        const handleSubmit = () => {
            console.log(data.form, 'form')

            let obj = {
                menuId: data.form.menuId,
                parentId: data.form.parentId,
                menuType: data.form.menuType,
                icon: data.form.icon || '',
                menuName: data.form.menuName,
                orderNum: data.form.orderNum,
                isFrame: data.form.isFrame,
                path: data.form.path || '',
                component: data.form.component || '',
                perms: data.form.perms || '',
                query: data.form.query || '',
                isCache: data.form.isCache || '',
                visible: data.form.visible,
                status: data.form.status,
                remark: data.form.remark || '',
            }
            data.formRef.validate((valid) => {
                if(valid){
                    data.dialogVisible = false;
                    updateMenu(obj).then(res=>{
                        if(res.code == 200){
                            ElMessage.success("保存成功")
                            emit("rest")
                            cancel()
                        }else{
                            ElMessage.error(res.err)
                        }
                    })
                }  
            })
        }

        const cancel = () => {
            data.formRef.clearValidate();
            data.dialogVisible = false;
        }

        const openDialog = (row) => {
            query()
            console.log(row, 'row')
            data.dialogVisible = true
            data.form = { ...row }
        }

        return {
            ...toRefs(data),
            openDialog,
            selected,
            handleSubmit,
            cancel
        }
    }
};
</script>
<style lang="scss" scoped>

</style>